<template STYLE="position: relative">
   <div class="card">
     <nav>
       <svg class="arrow" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 " stroke="#727272"/></svg>
       Back to all Projects
       <svg class="heart" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" stroke="#727272" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,254.6c-15.8-16.6-25.6-39.1-25.6-63.9  c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4 M340.8,83C307,83,276,98.8,256,124.8  c-20-26-51-41.8-84.8-41.8C112.1,83,64,131.3,64,190.7c0,27.9,10.6,54.4,29.9,74.6L245.1,418l10.9,11l10.9-11l148.3-149.8  c21-20.3,32.8-47.9,32.8-77.5C448,131.3,399.9,83,340.8,83L340.8,83z" stroke="#727272"/></svg>
     </nav>
     <div class="photo">
       <img :src="project.headPictureUrl">
     </div>
     <div class="description">
       <h2>{{project.name}}</h2>
       <h4>{{ project.description }}</h4>
       <h1>${{ project.price }}</h1>
       <p>{{project.descriptionDetail}}</p>
       <button>加入购物车</button>
       <button @click="visible.reservationDialog = true">立刻预订</button>
     </div>
   </div>
  <el-divider content-position="center" style="width: 650px; margin: 0 auto; margin-top: 470px">下滑见详情图</el-divider>
  <img :src="project.detailPictureUrl" style="width: 650px; margin: 0 auto; margin-top: 40px">
  <el-dialog
      v-model="visible.reservationDialog"
      title="请填写预约信息"
      width="400"
  >
    <el-date-picker
        v-model="reservation.time"
        placeholder="到店时间"
        format="YYYY/MM/DD"
        class="el-date-picker-time"
    />
    <el-select class="el-select-pet" v-model="reservation.petSelect" placeholder="携带的宠物">
      <el-option
          v-for="(pet, index) in reservation.petList"
          :label="pet.name"
          :value="pet.id"
          v-bind:key="index"
      >
      </el-option>
    </el-select>
    <div class="dialog-footer">
      <el-button style="margin-right: 20px" type="info" @click="visible.reservationDialog = false">取消</el-button>
      <el-button type="primary" @click="doReservation">
        预约
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

import axios from "axios";
import {ElMessage} from "element-plus";


export default {
  name: "PetCardDetail",
  data(){
    return{
      project:{
        id: '',
        name: '',
        category: '',
        headPictureUrl: '',
        detailPictureUrl: '',
        description: '',
        descriptionDetail: '',
        price: '',
      },
      visible:{
        reservationDialog: false
      },
      reservation:{
        petList:[],
        petSelect: '',
        time: '',
      }
    }
  },
  mounted() {
    this.getProjectInfo();
    this.getPets();
  },
  methods:{
    getProjectInfo(){
      axios.get("http://localhost:8088/get/project/"+this.$route.query.id,{withCredentials:true})
          .then(response => {
            this.project = response.data.data
          })
    },
    getPets(){
      axios.get("http://localhost:8088/get/pet",{withCredentials:true})
          .then(res => {
            this.reservation.petList = res.data.data
          })
    },
    doReservation(){
      var forms = new FormData();
      forms.append('projectId',this.project.id);
      forms.append('petId',this.reservation.petSelect)
      forms.append('time',this.reservation.time)
      axios.post("http://localhost:8088/reservation/do",forms,{withCredentials:true})
          .then(res => {
            console.log(res)
            this.visible.reservationDialog = false;
            this.reservation.time = null;
            this.reservation.petSelect = '';
            if (res.data.code == 200){
              ElMessage.success('预订成功')
            }else {
              ElMessage.error('预订失败:  '+res.data.description)
            }
          })
    }
  }
}
</script>

<style scoped>


* { box-sizing: border-box; }

body {
  background: #aedaa6;
  font-family: "Raleway";
}


.card {
  width: 650px;
  position: absolute;
  background: white;
  top: 15%;
  left:50%;
  transform: translateY(-50%);  /*定位*/
  transform: translateX(-50%);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  transition: all 0.3s;
}

.card:hover {
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.card nav {
  width: 100%;
  color: #727272;
  text-transform: uppercase;
  padding: 20px;
  border-bottom: 2px solid #efefef;
  font-size: 12px;
}

.card nav svg.heart {
  height: 24px;
  width: 24px;
  float: right;
  margin-top: -3px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card nav svg.heart:hover {
  fill: red;
}

.card nav svg.arrow {
  float: left;
  height: 15px;
  width: 15px;
  margin-right: 10px;
}

.card .photo {
  padding: 30px;
  width: 45%;
  text-align: center;
  float: left;
}

.card .photo img {
  max-height: 240px;
}

.card .description {
  padding: 30px;
  float: left;
  width: 55%;
  border-left: 2px solid #efefef;
}

.card .description h1 {
  color: #515151;
  font-weight: 300;
  padding-top: 15px;
  margin: 0;
  font-size: 30px;
  font-weight: 300;
}

.card .description h2 {
  color: #515151;
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
}

.card .description h4 {
  margin: 0;
  color: #727272;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
}

.card .description p {
  font-size: 12px;
  line-height: 20px;
  color: #727272;
  padding: 20px 0;
  margin: 0;
}

.card .description button {
  outline: 0;
  border: 0;
  background: none;
  border: 1px solid #d9d9d9;
  padding: 8px 0px;
  margin-bottom: 30px;
  color: #515151;
  text-transform: uppercase;
  width: 125px;
  font-family: inherit;
  margin-right: 5px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.card .description button:hover {
  border: 1px solid #aedaa6;
  color: #aedaa6;
  cursor: pointer;
}

.el-date-picker-time{
  --el-date-editor-width: 300px;
  margin: 0 auto 30px;
}
.el-select-pet{
  --el-select-width: 220px;
  margin: 20px auto;
}

</style>

<style>

</style>